import React, { useEffect, useRef, useState } from 'react';
import { Modal, Button } from 'antd';
import type { DraggableData, DraggableEvent } from 'react-draggable';
import Draggable from 'react-draggable';
import Loading from '@/components/Loading';
import styled from '@emotion/styled';
import { useTTSBoardCast } from '../Context/TTSBoardCastContext';
import Message from '@/utils/message';
import { useTranslation } from 'react-i18next';

const Title = styled.div`
	width: 100%;
	cursor: move;
	display: flex;
	align-items: center;
`;
const IconSvg = styled.span`
	display: flex;
	padding: 0 4px;
	vertical-align: middle;
`;

const SmallText = styled.span`
	font-size: 13px;
	color: #4d4d4d;
`;

const CloseIcon = styled.div`
	width: 100px;
	height: 100%;
	display: flex;
	align-items: center;
`;

const Context = styled.div`
	overflow-y: auto;
	height: 189px;
	font-size: 13px;
	color: ${(props: { speaking: boolean }) => (props.speaking ? '#2d2d2d' : '#999999')};
`;

const BoardCastModal = () => {
	const { t } = useTranslation();
	const { BoardCastModal, setBoardCastModal, TTSBoardCastText, Speaking, setTTSBoardCastStats, stopSpeak, cancelTTSWithRecordMessage } = useTTSBoardCast();

	const [disabled, setDisabled] = useState(false);
	const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
	const draggleRef = useRef<HTMLDivElement>(null);

	const handleOk = (e: React.MouseEvent<HTMLElement>) => {
		console.log(e);
		setBoardCastModal(false);
		setTTSBoardCastStats('default');
		stopSpeak();
		cancelTTSWithRecordMessage(TTSBoardCastText());
		Message.normal(t('tts-broadcast-cancelled'));
	};

	const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
		console.log(e);
		setBoardCastModal(false);
		setTTSBoardCastStats('open');
	};

	const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
		const { clientWidth, clientHeight } = window.document.documentElement;
		const targetRect = draggleRef.current?.getBoundingClientRect();
		if (!targetRect) {
			return;
		}
		setBounds({
			left: -targetRect.left + uiData.x,
			right: clientWidth - (targetRect.right - uiData.x),
			top: -targetRect.top + uiData.y,
			bottom: clientHeight - (targetRect.bottom - uiData.y)
		});
	};

	return (
		<>
			<Modal
				wrapClassName="tts-modal-wrap"
				maskClosable={false}
				mask={false}
				destroyOnClose={true}
				className="tts-modal"
				zIndex={31}
				title={
					<Title
						onMouseOver={() => {
							if (disabled) {
								setDisabled(false);
							}
						}}
						onMouseOut={() => {
							setDisabled(true);
						}}
						onFocus={() => {}}
						onBlur={() => {}}
					>
						{Speaking() ? (
							<IconSvg className="widget-icon" aria-hidden="true">
								<svg style={{ width: '19px', height: '16px' }}>
									<use xlinkHref={'#icon-widget-laba'}></use>
								</svg>
							</IconSvg>
						) : (
							<Loading width={18} height={18} />
						)}
						{Speaking() ? t('tts-broadcasting') : t('tts--broadcast-loading')}
					</Title>
				}
				closeIcon={
					<CloseIcon>
						<IconSvg className="widget-icon" aria-hidden="true">
							<svg style={{ width: '14px', height: '14px' }}>
								<use xlinkHref={'#icon-widget-zuixiaohua'}></use>
							</svg>
						</IconSvg>
						<SmallText>{t('minimize')}</SmallText>
					</CloseIcon>
				}
				footer={
					<Button type="primary" onClick={handleOk}>
						{t('cancel-broadcast')}
					</Button>
				}
				open={BoardCastModal()}
				onCancel={handleCancel}
				modalRender={modal => (
					<Draggable disabled={disabled} bounds={bounds} onStart={(event, uiData) => onStart(event, uiData)}>
						<div ref={draggleRef}>{modal}</div>
					</Draggable>
				)}
			>
				<Context speaking={Speaking()}>{TTSBoardCastText()}</Context>
			</Modal>
		</>
	);
};

export default BoardCastModal;
